import React, { Component } from "react";

export default class Shoppingcar extends Component {
  constructor() {
    super();
    this.state = {
      checkedAll:false,
      list: [
        { id: 1, goodsname: "商品名称一", goodsnum: 1, goodsprice: 100,checked:false },
        { id: 2, goodsname: "商品名称二", goodsnum: 2, goodsprice: 200,checked:false },
        { id: 3, goodsname: "商品名称三", goodsnum: 3, goodsprice: 300,checked:false },
      ],
    };
  }
  calc = (item, num) => { //计算属性
    //更新
    //能不能直接进行操作
    item.goodsnum = item.goodsnum + num; //引用类型  指向同一块内存地址
    this.setState({}); //触发render
  };
  delById = (id)=>{ //参数
      // this.state.list  = this.state.list.filter(item=>item.id!=id);
      // this.setState({}); //触发render
    this.setState({//删除
      list:this.state.list.filter(item=>item.id!==id),
    },()=>{
      this.setCheckedAll();
    })

  }
  changeCheckedAll = (flag)=>{
    this.setState({
      checkedAll:flag,
      list:this.state.list.map(item=>{
        item.checked = flag;
        return item;
      })
    })

  }
  changeCheckedOne = (item,flag)=>{
      item.checked = flag;

      this.setCheckedAll();//设置全选的状态
  }

  setCheckedAll = ()=>{
    this.setState({
      checkedAll:this.state.list.length? this.state.list.every(item=>item.checked):false,//every表示都满足结果才为ture
    });
  }


  render() {
    let totalNum  = 0;
    let totalPrice  = 0;

   let checkedList = this.state.list.filter(item=>item.checked);
   //选中的集合
   if(checkedList.length){
      totalNum  = checkedList.map(item=>item.goodsnum).reduce((a,b)=>a*1+b*1);
      totalPrice = checkedList.map(item=>item.goodsnum*item.goodsprice).reduce((a,b)=>a+b);

   }


    return (
      <div>
        <hr />
        <div className="tr">
          <div className="td">
            <input type="checkbox" checked={this.state.checkedAll} onChange={(e)=>{
              this.changeCheckedAll(e.target.checked)
            }} /> 全选
          </div>
          <div className="td">商品名称</div>
          <div className="td">商品价格</div>
          <div className="td">商品数量</div>
          <div className="td">小计</div>
          <div className="td">操作</div>
        </div>
        {this.state.list.map((item) => (
          <div className="tr" key={item.id}>
            <div className="td">
              <input type="checkbox" checked={item.checked} onChange={(e)=>{
                    this.changeCheckedOne(item,e.target.checked);
              }}/>
            </div>
            <div className="td">{item.goodsname}</div>
            <div className="td">{item.goodsprice}</div>
            <div className="td">
              {/* {item.goodsnum>1?<button>-</button>:""} */}
              <button
                onClick={() => {
                  this.calc(item, -1);
                }}
                style={{ display: item.goodsnum > 1 ? "inline-block" : "none" }}
              >
                -
              </button>
              <input type="text" value={item.goodsnum} onChange={() => {}} />
              <button
                onClick={() => {
                  this.calc(item, 1);
                }}
              >
                +
              </button>
            </div>
            <div className="td">{item.goodsnum * item.goodsprice}</div>
            <div
              className="td"
              onClick={() => {
                this.delById(item.id);
              }}
            >
              删除
            </div>
          </div>
        ))}
        <div className="tr">
          <div className="td">
          </div>
          <div className="td"></div>
          <div className="td"></div>
          <div className="td">{totalNum}</div>
          <div className="td">{totalPrice.toFixed(2)}</div>
          <div className="td"></div>
        </div>
      </div>
    );
  }
}
